import React, { useState, useEffect } from 'react';
import axios from 'axios';
import tx from './6.jpg';
import { useNavigate } from 'react-router-dom';
import { NavBar } from 'antd-mobile';
import style from '../lyf/Detail.module.css'


export default function QJDetail() {
  const id = localStorage.getItem('chuchai');
  const [QJ, setQJ] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const navigate = useNavigate()

  useEffect(() => {
    if (!id) {
      setError('未找到请假ID');
      setLoading(false);
      return;
    }

    const fetchData = async () => {
      try {
        const res = await axios.post('http://localhost:3111/chuchai/Chulist', { id });
        setQJ(res.data.data);
      } catch (err) {
        setError(err.message || '获取数据失败');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [id]);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误: {error}</div>;

  // 筛选zhiye为"员工"的数据
  const filteredQJ = QJ.filter(item => item.zhiye === "员工");

  if (filteredQJ.length === 0) return <div>未找到员工的数据</div>;

  const back = () => {
    navigate("/daiban")
  }

  return (
    <div>
      <NavBar onBack={back}>请假详情</NavBar>
      <p style={{ fontSize: '15px', marginLeft: '10px', color: 'rgb(61,158,109)' }}>申报人信息</p>
      <div className={style.xinxi}>
        {QJ.filter(i => i._id == id).map(item => (
          <div style={{ display: 'flex' }} key={item._id}>
            <img src={tx} className={style.toux} />
            <p style={{ fontSize: '25px', marginTop: '50px', marginLeft: '10px' }}>{item.username}</p>
          </div>
        ))}
        {QJ.filter(i => i._id == id).map(item => (
          <div style={{ marginLeft: '20px' }} key={item._id}>
            <p className={style.jingli}> {item.zhiye} <br />Managere</p>
            <p style={{ fontSize: '18px', marginTop: '15px', marginLeft: '10px' }}>所属部门：{item.bumen}</p>
          </div>
        ))}
      </div>
      <p style={{ fontSize: '15px', marginLeft: '10px', color: 'rgb(61,158,109)', marginTop: '20px' }}>出差详情</p>
      <hr style={{ marginTop: '10px' }} />
      <p style={{ fontSize: '16px', marginLeft: '20px', color: 'rgb(180,180,180)', marginTop: '10px' }}>申请时间：2025-5-10</p>

      {QJ.filter(i => i._id == id).map(item => (
        <div key={item._id} style={{ margin: "20px 50px", lineHeight: "30px" }}>
          <p>标题: {item.title}</p>
          <p>部门：{item.bumen}</p>
          <p>职位: {item.zhiye}</p>
          <p>原因: {item.yuanyin}</p>
          <p>申请人: {item.username}</p>
          <p>出发地：{item.TXrenyuan}</p>
          <p>目的地：{item.didian}</p>
          <p>出差类型：{item.chailvleixing}</p>
          <p>出行方式：{item.CXfangshi}</p>
          <p>订票方式：{item.DPfangshi}</p>
          <p>开始日期: {item.CFtime}</p>
          <p>结束日期: {item.FHtime}</p>
          当前状态：<button style={{ color: item.zhuangtai == 2 ? "#4CA5FF" : "#FF5353", border: item.zhuangtai == 2 ? '1px solid #4CA5FF' : '1px solid #FF5353' }}>{item.zhuangtai == 2 ? "待审批" : (item.zhuangtai == 1 ? "未读" : "")}</button>
        </div>
      ))}

      <div style={{ margin: "50px" }}>
        <div style={{ display: "flex" }}>
          <img src={tx} style={{ width: "40px", height: "40px", borderRadius: "50%" }} />
          <div style={{ marginLeft: "20px", lineHeight: "30px" }}>
            <p><span style={{ color: "#3366CC", fontSize: "15px", fontWeight: "800" }}>同意</span></p>
            <p style={{ fontSize: "12px" }}>直接上级审批 吴良玉 时间</p>
          </div>
        </div>
        <div style={{ height: "40px", width: "3px", backgroundColor: "#1E9FF2", marginLeft: "17px" }}></div>
        <div style={{ display: "flex" }}>
          <img src={tx} style={{ width: "40px", height: "40px", borderRadius: "50%" }} />
          <div style={{ marginLeft: "20px", lineHeight: "30px" }}>
            <p><span style={{ color: "#3366CC", fontSize: "15px", fontWeight: "800" }}>等待审批</span></p>
            <p style={{ fontSize: "12px" }}>等待行政专员审批流程</p>
          </div>
        </div>
        <div style={{ height: "40px", width: "3px", backgroundColor: "#1E9FF2", marginLeft: "17px" }}></div>
        <div style={{ display: "flex" }}>
          <div style={{ width: "40px", height: "40px", backgroundColor: "#1E9FF2", borderRadius: "50%", textAlign: "center", lineHeight: "40px", fontSize: "20px", color: "white" }}>?</div>
          <div style={{ marginLeft: "20px", lineHeight: "30px" }}>
            <p style={{ fontSize: "12px", color: "#ccc" }}>审批中</p>
          </div>
        </div>
      </div>
    </div>
  );
}